<template>
	<div class="content">
		<div class="main">
			<!-- 第一个tabs 基本信息 药典 -->
			<el-dialog :title="dialogTitle" v-dialogDrag :visible.sync="dialogFormVisible" width="48%" :before-close="handleClose">
				<div class="add">
					<!-- 分割标题 -->
					<div class="formTypeHeader">
						<!-- 表单 -->
						<el-form ref="addForm" :rules="addRules" :model="addForm" size="mini" :disabled="!isShow">
							<el-row :gutter="20">
								<el-col :xs="v.xs" :sm="v.xs" :md="v.md" :lg="v.lg" :xl="v.xl" type="flex" v-for="(v,i) in formTypeHeader" :key="i">
									<!-- input -->
									<el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
										<el-input v-model="$data.addForm[v.modelValue]" :disabled="v.disabled" @blur="inputChanceName"></el-input>
									</el-form-item>
									<!-- select -->
									<el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
										<el-select v-model="$data.addForm[v.modelValue]" filterable @focus="handlefoucs(v,i)" @change="handleChange">
											<el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
												<div style="font-size: 12px;display: flex;justify-content: space-between;align-items: center;">
													<span>{{ item.id }}</span>
													<span>{{ item.label }}</span>
													<span>{{ item.code }}</span>
												</div>
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
					<!-- 分割主题 -->
					<div class="formTypeMain">
						<!-- 表单 -->
						<el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabChange">
							<el-tab-pane label="基本信息[F2]" name="a">
							<div class="addFormA">
							<el-form ref="addFormA" :rules="addRules" :model="addForm" size="mini" :disabled="MainFormAbled">
								<el-row :gutter="20">
									<el-col :xs="v.xs" :sm="v.xs" :md="v.md" :lg="v.lg" :xl="v.xl" type="flex" v-for="(v,i) in formTypeMain" :key="i">
										<!-- input -->
										<el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
											<el-input v-model="$data.addForm[v.modelValue]" :disabled="v.disabled" @blur="inputChance(v,i)"></el-input>
										</el-form-item>
										<!-- select -->
										<el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
											<el-select v-model="$data.addForm[v.modelValue]" filterable @focus="handlefoucsA(v,i)" @change="handleChangeA"
											:disabled="v.disabled">
												<el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
													<div style="font-size: 12px;display: flex;justify-content: space-between;align-items: center;">
														<span>{{ item.id }}</span>
														<span>{{ item.label }}</span>
														<span>{{ item.code }}</span>
													</div>
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
							</div>
						</el-tab-pane>
						<el-tab-pane label="生产厂家[F3]" name="b">
							<div class="addFormB">
							<el-form ref="addFormB" :rules="addRules" :model="addForm" size="mini" :disabled="!isShow">
								<el-row :gutter="20" style="display: flex;flex-direction: column;width: 100%;">
									<el-col :xs="v.xs" :sm="v.xs" :md="v.md" :lg="v.lg" :xl="v.xl" type="flex" v-for="(v,i) in formTypeMainC" :key="i">
										<!-- table 新增厂家信息 -->
										<el-form-item v-if="v.type == 'table'">
											<div class="table">
												<div style="display: flex;justify-content: space-between;background: #00557f;align-items: center;">
													<span style="font-size: 12px;color: #fff;margin-left: 12px;">{{v.label}}</span>
													<li style="list-style-type: none;margin-right: 12px;">
														<el-button v-for="(v,i) in boxaBtn" :key="i" :type="v.type" :icon="v.icon" size="medium" 
														@click="boxaBtnHandClick(i)"></el-button>
													</li>
												</div>
												<el-table ref="ManFacterTable" :data="ManufacturerData" border
												highlight-current-row @current-change="handleCurrentTableChange">
													<el-table-column fixed="left" label="行号" type="index" width="50" align="center"></el-table-column>
													<el-table-column v-for="(col, inx) in ManufacturerDataRows" :width="columnWidth(col, ManufacturerData)"
													 :key="inx" :type="col.type" :prop="col.prop" :label="col.name">
													</el-table-column>
												</el-table>
											</div>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
							</div>
						</el-tab-pane>
						<el-tab-pane label="扩展内容[F4]" name="c">
							<div class="addFormC">
							<el-form ref="addFormC" :rules="addRules" :model="addForm" size="mini" :disabled="!isShow">
								<el-row :gutter="20">
									<el-col :xs="v.xs" :sm="v.xs" :md="v.md" :lg="v.lg" :xl="v.xl" type="flex" v-for="(v,i) in formTypeMainC" :key="i">
										<!-- input -->
										<el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
											<el-input v-model="$data.addForm[v.modelValue]" :disabled="v.disabled" @blur="inputChance(v,i)"></el-input>
										</el-form-item>
										<!-- checked -->
										<el-form-item v-if="v.type == 'checked'" :label="v.label" :prop="v.modelValue">
											<el-checkbox v-model="isChecked" @change="toggleYesNo"></el-checkbox>
										</el-form-item>
										<!-- textarea -->
										<el-form-item v-if="v.type == 'textarea'" :label="v.label" :prop="v.modelValue">
											<el-input type="textarea" :rows="4" v-model="$data.addForm[v.modelValue]"></el-input>
										</el-form-item>
										<!-- select -->
										<el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
											<el-select v-model="$data.addForm[v.modelValue]" filterable :disabled="v.disabled ? disabledC : v.disabled"
											@focus="handlefoucs(v,i)" @change="handleChangeC">
												<el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
													<div style="font-size: 12px;display: flex;justify-content: space-between;align-items: center;">
														<span>{{ item.id }}</span>
														<span>{{ item.label }}</span>
													</div>
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
							</div>
						</el-tab-pane>
					</el-tabs>
					</div>
					<div slot="footer" class="dialog-footer" v-if="isShow">
						<el-button v-if="!editShow" size="mini" type="primary" @click="submitForm">新增</el-button>
						<el-button v-if="dialogTitle == '编辑'" size="mini" type="primary" @click="submitEditForm">保存</el-button>
						<el-button size="mini" @click="dialogFormVisible = false">最小化</el-button>
					</div>
				</div>
			</el-dialog>						
		</div>
		<div class="feet">
			<!-- 厂家新增选择Model -->
			<div class="GetManuFact">
				<el-dialog
				  title="新增厂家"
				  :visible.sync="GetManuFactDialogVisible"
				  width="40%"
				  top="188px"
				  :before-close="handleMacnFactClose">
				  <!-- 表单 -->
				  <div class="form">
					<!-- 厂家表单 -->
					<el-form :model="addManfacterForm" size="mini">
						<el-row :gutter="20">
							<el-col :xs="v.xs" :sm="v.xs" :md="v.md" :lg="v.lg" :xl="v.xl" type="flex" v-for="(v,i) in addManfacterFormType" :key="i">
								<!-- input -->
								<el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.prop">
									<el-input v-model="$data.addManfacterForm[v.modelValue]"></el-input>
								</el-form-item>
								<!-- select -->
								<el-form-item v-if="v.type == 'selectFirst'" :label="v.label" :prop="v.modelValue">
									<el-select v-model="$data.addManfacterForm[v.modelValue]" :disabled="v.disabled ? addDisabled : v.disabled" filterable
									@focus="handlefoucs(v,i)" @change="handleChangeManfacter" :filter-method="searchMethod" :popper-append-to-body="false">
										<el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id" v-loading="loading">
											<div id="optionItem">
												<span style="width: 58px;">{{ item.id }}</span>
												<span style="width: 188px;text-align: left;">{{ item.label }}</span>
												<span style="width: 48px;text-align: center;">{{ item.coding }}</span>
												<span style="width: 68px;">{{  item.origin }}</span>
											</div>
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				  </div>
				  <span slot="footer" class="dialog-footer">
				    <el-button size="mini" plain type="primary" @click="GetManuFact">保存</el-button>
				    <el-button size="mini" plain type="primary" @click="GetManuFactDialogVisible = false">取 消</el-button>
				  </span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	// selfs / props

	// selfs / js
	import addForm from './addForm.js' //Form表单
	import addDialogType from './addDialogType.js' //Form表单
	import addManFacterType from './addManFacterType.js' //Form厂家Model表单结构
	import Pinyin from "@/external/pinyin.js"; //中译音
	// axios
	import { getDrugUnt,docMarkById,getDosaUnt }  from "@/api/systemCatalogue/traMedici.js";
	import { addTraMedici,getTraMedic,UpdateTraMedici }  from "@/api/systemCatalogue/traMedici.js";
	import { getManufacturer } from "@/api/systemCatalogue/MedicenCata.js"; // 厂家
	import { dict } from "@/api/staff/staff.js"; // 数据字典
	export default {
		inject: ['reload'], // 无痕刷新
		components: {
			
		},
		props: ['parentMethod'],
		data() {
			return {
				// str
				idcode:'', //参数储存 IdCode
				idcodeIII:'', //参数储存 IdCode
				dialogTitle:'', // dialog-Title
				
				getValue:'',
				activeTab:'a',
				inputSearchValue:'',
				ToSendDrugCode:'', //传给子组件新增的药品本位码
				// number
				idx:0,
				pageNum: 1, //当前页currentPage
				pageSize: 28, //每页展示条数
				totalSize: 10, //总条数
				// blean
				dialogFormVisible:false, // model
				GetManuFactDialogVisible:false,
				loading:false,
				MainFormAbled:true,
				disabledC:true,
				isShow:true,
				editShow:false,
				isChecked:false, // 开单数量提醒
				// arr
				formTypeHeader:[
					{ id:0, label:'药典名称:',xs:24,sm:24,md:24,lg:24,xl:24,type:'input',prop:'name',modelValue:'name'},
					{ id:1, label:'药品剂型:',xs:24,sm:24,md:12,lg:12,xl:8,type:'select',modelValue:'dosform',prop:"dosform",op:'dosformOptions' },
					{ id:2, label:'中药种类:',xs:24,sm:24,md:12,lg:12,xl:16,type:'select',modelValue:'tcmType',prop:"tcmType",op:'tcmTypeOptions' },
				],
				ManufacturerData:[], // 厂家data
				ManufacturerOptions:[], // 厂家data
				//厂家rows
				ManufacturerDataRows:[
					{ name:"生产厂家", prop:"manufacturerName", type:"" },{ name:"医保名称", prop:"chsName", type:"" },
					{ name:"医保编码", prop:"chsCode", type:"" },{ name:"产地", prop:"orplc", type:"" },
					{ name:"批准文号", prop:"manuLotnum", type:"" },{ name:"带量采购", prop:"cntBuy", type:"" },
					{ name:"集采中选", prop:"gatherBuyType", type:"" },{ name:"备注", prop:"remark", type:"" },
				],
				boxaBtn:[{add:"add",type:"text",icon:"el-icon-plus"},{adit:"adit",type:"text",icon:"el-icon-edit"},{del:"del",type:"text",icon:"el-icon-delete"}],
				formTypeMain:[],
				formTypeMainC:[], // 表单C结构
				addManfacterFormType:[],
				currentTable:[], // 表格单选
				options:[],
				NameOptions:[],
				itemsForObj:[],
				unitDoseOptions:[], // 包装单位
				getDosaUntOptions:[], // 剂量单位
				methodTypeOptions:[], // 默认制法
				YNoptions:[{id:0,label:'否',value:'否'},{id:1,label:'是',value:'是'}],
				statusOptions:[{id:0,label:'禁用',value:'0'},{id:1,label:'可用',value:'1'},],
				tcmTypeOptions:[{id:1,label:'植物类药'},{id:2,label:'动物类药'},{id:3,label:'金石矿物类药'}], // 中药种类
				UseOptions:[{ id:0,label:'全部',value:'全部'},{ id:1,label:'门诊',value:'门诊'},{ id:2,label:'其他',value:'其他'}], // 适用范围
				gatherBuyTypeOptions:[{ id:1,label:'中选'},{ id:2,label:'非中选'}],
				dosformOptions:[{ id:1,label:'饮片'},{ id:2,label:'颗粒'}],
				markUpOption:[{id:1,label:'比例加成',value:'比例加成'},{id:2,label:'固定加成',value:'固定加成'},{id:3,label:'手工比例加成',value:'手工比例加成'}], //加成方式
				basicTypeOptions:[{ id:1,label:'国家基药',value:'国家基药'},{ id:2,label:'省级基药',value:'省级基药'},{ id:3,label:'地区基药',value:'地区基药'}], //基药类型
				expensiveTypeOptions:[{id:1,label:'普价'},{id:2,label:'贵重'},{id:3,label:'昂贵'},{id:4,label:'免费'}],
				// obj
				addForm:{}, //form主体表单 * 
				addManfacterForm:{},  //form厂家表单 * 
				param:{},
				addRules:{
					name:[{ required:true,message:'中药名称不能为空！',trigger:'blur' }],
					tcmType:[{ required:true,message:'种类为必填项!',trigger:'change' }],
					pacCnt:[{ required:true,validator: this.validatePacCnt, trigger: 'blur' }],
					pacUnt:[{ required:true,message:'包装单位为必填项!',trigger:'change' }],
					dosUnt:[{ required:true,message:'剂量单位为必填项!',trigger:'change' }],
				},
				elTree:[
					{ id:1,label: '西药',path:'',title:'西药',icon:'el-icon-xy'},
					{ id:2,label: '中成药',path:'',title:'中成药',icon:'el-icon-zhongchengyao'},
					{ id:3,label: '中草药',path:'',title:'中草药',icon:'el-icon-zhongcaoyao'},
					{ id:4,label: '民族药',path:'',title:'民族药',icon:'el-icon-xyzp'},
					{ id:5,label: '卫材',path:'',title:'卫材',icon:'el-icon-xyjhtxyyzhy'},
					{ id:6,label: '血液',path:'',title:'血液',icon:'el-icon-blood'},
					{ id:7,label: '疫苗',path:'',title:'疫苗',icon:'el-icon-yimiaoke'},
					{ id:8,label: '检验试剂',path:'',title:'检验试剂',icon:'el-icon-tjxg'},
					{ id:9,label: '营养',path:'',title:'营养',icon:'el-icon-cnyyyy'},
				],
				// external
				pickerOptions: {
				  shortcuts: [
					{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); }}, 
					{ text: '昨天', onClick(picker) { const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, 
					{ text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}},
					]
				},
				// props
				//zdy
				
			}
		},
		// life
		mounted() {
			this.getForm();
			this.pacUnt(); // 包装单位
			this.getDosaUnt(); // 剂量单位
			this.getditc(); // 数据字典
			// 监听全局键盘事件
			window.addEventListener('keydown', this.handleKeyPress);
		},
		methods: {
			/* 数据源 */
			async loadData(){
				// 厂家接口
				//  模糊搜索接口select函数
				let res = await getManufacturer({
					manufacturerName:this.inputSearchValue,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if(res.code === 200){
					this.inputSearchValue == '' ? this.loading = false : this.loading = true;
					setTimeout(() =>{
						this.ManufacturerOptions = res.data.content.map(v=>{
							return { id:v.id,prodentpId:v.id,label: v.manufacturerName,origin:v.origin,coding:v.coding}
						})
						console.log(this.ManufacturerOptions);
						this.loading = false
						this.$message({ type: "success", message: res.message });
					},888)
				}else{
					this.$message.error(res.message)
					this.NameOptions = [];
				}
			},
			// 挂载或销毁前后重新赋值后端参数
			getForm(){
				// 左侧提交表单
				this.addForm = addForm.map(v => {return v })[0]; // Form
				// 定义数据来源
				this.formTypeMain = addDialogType.map(function(val) { return val }).slice(0,16)
				this.formTypeMainC = addDialogType.map(function(val) { return val }).slice(16)
				// 解构赋值排除 list 属性 => 弃用
				// this.addHeadrForm = addForm.map(item => { let { list, ...newItem } = item; return newItem })[0];
			},
			// 包装单位
			async pacUnt(){
				let res = await getDrugUnt();
				if(res.code===200){ this.unitDoseOptions=res.data.map(v => {return { label: v.name, ...v}}) }else{ this.$message.error(res.message) }
			},
			// 剂量单位
			async getDosaUnt(){
				let res = await getDosaUnt();
				if(res.code===200){ this.getDosaUntOptions=res.data.map(v => {return { label: v.name, ...v}}) }else{ this.$message.error(res.message) }
			},
			// 默认制法 <= 数据字典
			async getditc(){
			   let res = await dict();
			   if(res.code===200){ this.methodTypeOptions=res.data.tcmway.map(v => {return {id:v.id, label: v.name, ...v}}) }else{ this.$message.error(res.message) }
			},
			// 加成率
			async getDocMark(){
				let res = await docMarkById();
			},
			/* 打开新增Model */
			async openAddModel(param){
				if(param){
					this.dialogFormVisible = true
					this.dialogTitle = param.label
					this.isShow = param.isShow
					this.MainFormAbled = !param.system
					this.editShow = param.system
					let res = await getTraMedic({ id:param.id });
					if(res.code === 200){
						// console.log(res.data);
						// 遍历 res.data 的所有键名
						for (let key in res.data) {
						  // 检查键名是否在对象 A 中存在
						  if (this.addForm.hasOwnProperty(key)) {
							// 如果存在，将 B 中的值更新到 A 中
							this.addForm[key] = res.data[key];
						  }
						}
						this.addForm.markUpId == 2 ? this.addForm.markUpFixed = 1 : this.addForm.markUpFixed = 0
						console.log(this.addForm,'获取合并之后的数据');
						this.ManufacturerData = this.addForm.list
						this.addForm.id = param.id
						console.log(this.ManufacturerData,'赋值之后的厂家信息');
					}
				}else{
					this.isShow = true
					this.dialogFormVisible = true
					this.dialogTitle = '新增中药目录'
				}
			},
			// 确定新增
			async submitForm(){
				// 自定义赋值
				// this.addForm.code = JSON.parse(sessionStorage.getItem('deptCode'))
				// 	sessionStorage.setItem('itemsForObj', JSON.stringify(this.itemsForObj))
				//触发验证表单
				this.$refs.addForm.validate(async(valid) => {
				if(valid){
					this.MainFormAbled = false;
					this.$refs.addFormA.validate(async(validA) => {
					// 再次验证表单
					if(validA){
						// 检测生产厂家
						if(this.ManufacturerData.length === 0){
							this.$confirm('检测到您当前还未填写厂家信息, 是否前往填写?', '提示:厂家信息为必填项。', {
								confirmButtonText: '去填写',
								cancelButtonText: '关闭提示',
								type: 'warning'
							}).then(() => {
								this.activeTab = 'b'
							}).catch(() => {
								this.$message({ type: 'error', message: '厂家信息为必填项！'});
								this.dialogFormVisible = false;
								this.resetAllFields();
							});
						}else{
							this.addForm.list = this.ManufacturerData;
							console.log('新增提交',this.addForm);
							let res = await addTraMedici(this.addForm)
							if (res.code === 200){
							this.$message({ type: "success", message: res.message });
							 // 更新数据驱动 => 父组件 shopPlan
							this.parentMethod();
							this.resetAllFields();
							this.dialogFormVisible = false
							this.ManufacturerData = []; // 清空厂家数组
							}
						}
						}
					});
					}
				});
			},
			// 修改保存
			submitEditForm(){
				console.log('修改提交',this.addForm);
				// //触发验证表单
				this.$refs.addForm.validate(async(valid) => {
				if(valid){
					this.MainFormAbled = false;
					this.$refs.addFormA.validate(async(validA) => {
					// 再次验证表单
					if(validA){
						// 检测生产厂家
						if(this.ManufacturerData.length === 0){
							this.$confirm('检测到您当前还未填写厂家信息, 是否前往填写?', '提示:厂家信息为必填项。', {
								confirmButtonText: '去填写',
								cancelButtonText: '关闭提示',
								type: 'warning'
							}).then(() => {
								this.activeTab = 'b'
							}).catch(() => {
								this.$message({ type: 'error', message: '厂家信息为必填项！'});
								this.dialogFormVisible = false;
								this.resetAllFields();
							});
						}else{
							this.addForm.list = this.ManufacturerData;
							let res = await UpdateTraMedici(this.addForm)
							if (res.code === 200){
							this.$message({ type: "success", message: res.message });
							 // 更新数据驱动 => 父组件 shopPlan
							this.parentMethod();
							this.resetAllFields();
							this.dialogFormVisible = false
							}
						}
						}
					});
					}
				});
			},
			// 清空所有表单
			resetAllFields(){
				this.$refs['addForm'].resetFields(); // 等待 DOM 更新后重置
				this.$refs['addFormA'].resetFields(); // 等待 DOM 更新后重置
				this.$refs['addFormB'].resetFields(); // 等待 DOM 更新后重置
				this.$refs['addFormC'].resetFields(); // 等待 DOM 更新后重置
			},
			// tabsA-Input聚焦
			handlefoucsA(v,i){
				this.idx = i;
			},
			async handleChangeA(v){
				// i event
				switch (this.idx) {
					case 12:
						if(v === 1){
							let res = await docMarkById();
							console.log(res,this.formTypeMain[this.idx+1],'pppppp');
							this.formTypeMain[this.idx + 1].label = "加成比例:"
							this.formTypeMain[this.idx + 1].modelValue = "markUpRate"
							this.formTypeMain[this.idx + 1].type = "select"
							this.addForm.markUpRate = ""
							this.addForm.markUpPric = ""
							this.addForm.markUpFixed = 0;
							this.formTypeMain[this.idx + 1].disabled = true;
						}else if(v === 2){
							console.log(this.formTypeMain[this.idx+1],'pppppp');
							this.formTypeMain[this.idx + 1].label = "加成金额:"
							this.formTypeMain[this.idx + 1].type = "input"
							this.formTypeMain[this.idx + 1].modelValue = "markUpPric"
							this.addForm.markUpRate = ""
							this.addForm.markUpFixed = 1;
							this.formTypeMain[this.idx + 1].disabled = false;
						}else{
							this.formTypeMain[this.idx + 1].label = "手工比例:"
							this.formTypeMain[this.idx + 1].type = "input"
							this.formTypeMain[this.idx + 1].modelValue = "markUpRate"
							this.addForm.markUpPric = ""
							this.addForm.markUpFixed = 0;
							this.formTypeMain[this.idx + 1].disabled = false;
						}
					break;
				}
			},
			// tabsB-Input聚焦
			async handlefoucsB(v,i){
				this.idx = i;
				console.log(i);
			},
			// select聚焦
			async handlefoucs(v,i){
				this.idx = i;
				console.log(i);
			},
			handleChange(v){
				
			},
			// 表格单选
			handleCurrentTableChange(val){
				console.log(val);
				this.currentTable = val
			},
			// 取消高亮
			setCurrent(row) {
			    this.$refs.ManFacterTable.setCurrentRow(row);
			},
			handleChangeC(v){
				switch(this.idx){
					case 0:
					if(v === 0){ this.disabledC = true;	this.addForm.basMednType='' }else{ this.disabledC = false }
					break;
				}
			},
			removeAllSpaces(str) {
			  return str.trim().replace(/\s+/g, '');
			},
			/* props */
			searchMethod(query, option) {
				query = this.removeAllSpaces(query);
				console.log(query);
				if(query){
					this.loading = true
					this.inputSearchValue = query
					this.pageNum = 0
					this.pageSize = 0
					this.loadData();
					this.loading = false
				}else{
					this.inputSearchValue = query
					this.pageNum = 1
					this.pageSize = 28
					this.loadData();
				}
			},
			
			// son btn events
			boxaBtnHandClick(i){
				// i event
				switch (i) {
					case 0:
						this.GetManuFactDialogVisible = true;
						this.addManfacterForm = this.addForm.list[0]
						this.addManfacterFormType = addManFacterType.map(function(val) { return val }) // 赋值厂家表单
						
						this.loadData();
						console.log(this.addManfacterFormType,'pppppppppp')
						console.log(this.addManfacterForm,'厂家表单')
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 2:
						// 处理索引2的逻辑 => 新增
						console.log('删除',this.ManufacturerData,this.currentTable)
						// 处理索引5的逻辑 => 审核
						if(this.currentTable.length === 0){
							this.$message({ type: 'warning', message: '请先单击选择一条数据'});
						}else{
							this.$confirm('删除过后需重新选择厂家数据, 是否继续?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								// 生成新数组，不改变原数组
								// this.ManufacturerData = this.ManufacturerData.filter(item => item.id !== 2);
								for (let i = this.ManufacturerData.length - 1; i >= 0; i--) {
								  if (this.ManufacturerData[i].prodentpId === this.currentTable.prodentpId) {
								    this.ManufacturerData.splice(i, 1); // 删除当前元素
								  }
								}
								this.$message({ type: 'success',message: '删除成功!' });
							}).catch(() => {
								this.$message({ type: 'info',message: '删除：已取消。'});          
							});
						}
						break;
				}
			},
			// 厂家已选择
			handleChangeManfacter(v){
				let Manfacters = this.ManufacturerOptions.find(id => id.prodentpId === v)
				if(Manfacters){ 
					this.addManfacterForm.manufacturerName = Manfacters.label;
					this.addManfacterForm.orplc = Manfacters.origin;
					this.addManfacterForm.id = Manfacters.prodentpId;
				}
				console.log(this.addManfacterForm,'ggggggggggssssssssssg');
			},
			// 确认保存厂家
			GetManuFact(){
				this.ManufacturerData.push(JSON.parse(JSON.stringify(this.addManfacterForm)))
				this.GetManuFactDialogVisible = false;
			},
			// col 里面包含了表头字段和名称，list 是表格数据
			columnWidth(col, list) {
					let prop = col.prop,lab = col.lab;
					let width = 20; // 设定一个最小值
					let maxlenStr = ""; // 最长字符串
					for (let info of list) {
			        if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
			}
			width = Math.max(width, len(lab), len(maxlenStr));
			// 表格自带的内边距(20px) 自调
			return width + 12; // 这里加了 12px
			function len(str) {
				// 实际分配长度可根据需要自行调整
				let length = 8;
				for (const char of str + "") {
				  // 英文小写字符 8px
				  if ("a" <= char && char <= "z") length += 8;
				  // 英文大写字符 8px
				  else if ("A" <= char && char <= "Z") length += 8;
				  // 中文字符 28px
				  else if (char >= "\u4e00" && char <= "\u9fa5") length += 12;
				  // 其他 8px
				  else length += 12;
				}
				return length;
			}
			},
			// 药典失焦
			inputChanceName(val){
				// console.log(val.target.value,'pppppppppppp');
				this.addForm.pyCode = this.makePy(this.addForm.name).toUpperCase();
				this.addForm.name != '' ? this.MainFormAbled = false : this.MainFormAbled = true;
			},
			// 多选框转换是否01
			toggleYesNo(value) {
			  this.addForm.lmtCntRemind = value ? 1 : 0;
			},
			// input失焦 简码转换赋值
			inputChance(v,i){
				// i event
				switch (i) {
					case 4:  // 通用名失焦开始赋值
					this.addForm.alisPyCode = this.makePy(this.addForm.alis).toUpperCase()
					break;
				}
			},
			// 时间处理
			changDate(val){
				let i = this.idx
				switch(i) {
					case 5:
					function formatDate(date) {
					  const year = date.getFullYear();
					  const month = (date.getMonth() + 1).toString().padStart(2, '0');
					  const day = date.getDate().toString().padStart(2, '0');
					  return `${year}-${month}-${day}`;
					}
					 
					// 使用示例
					const now = new Date();
					this.addForm.dateOfEmp = formatDate(val);
				}
			},
			// 选项卡切换回调（可选）
			handleTabChange(tab) {
			  console.log('当前选项卡:', tab.name);
			},
			// 地区处理
			handleSelectCost(val) {
			  this.addForm.nativePlace = val.join(',')
			},
			// 关闭Model
			handleClose(done) {
				this.$confirm('关闭不会保存内容，确认关闭？',{ type: 'warning' })
					.then(_ => {
					// 先重置表单
					// this.$nextTick(() => {
					//    // 等待 DOM 更新后重置
					// });
					// 再执行关闭
					this.dialogFormVisible = false;
					this.resetAllFields();
					// 确保重置完成后再关闭
					// done();
					// setTimeout(() => done(), 0); 
				}).catch(_ => {});
			},
			// 关闭Model 新增厂家
			handleMacnFactClose(done) {
			    this.$confirm('确认关闭？')
				.then(_ => {
					done();
				}).catch(_ => {});
			},
			// 自定义校检规则
			// 包装数量
			validatePacCnt(rule, value, callback) {
				// 正则校验规则：确保输入值只能为数字
				const regex = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
				if (!regex.test(value)) {
				  callback(new Error('包装数量格式错误！'));
				} else {
				  callback();
				}
			},
			// 参考零售单价
			validatesalePric(rule, value, callback) {
			    if (value === '') {
			        callback(); // 如果为空，不进行校验
			    } else{
					// 正则校验规则：确保输入值只能为数字
					const regex = /^[0-9]+$/;
					if (!regex.test(value)) {
					  callback(new Error('为数字'));
					} else {
					  callback();
					}
				}
			},
		},

	}
</script>

<style lang="less" scoped>
	// /deep/ .el-form-item__error {
	// 	  position: absolute;
	// 	  left: 88px;
	// 	  top: 50%;
	// 	  transform: translateY(-50%);
	// 	}
	/deep/ .el-select-dropdown__item {
		height: 36px;
		line-height: 14px;
		display: flex;
		align-items: center;
	}
.content{
	height: 100%;
	width: 100%;
	// 穿透
	/deep/ .el-dialog__header{
		padding: 4px 8px;
		background-color: #007bb0;
	}
	/deep/ .el-dialog__title{
		font-size: 12px;
		color: #fff;
	}
	/deep/ .el-dialog__headerbtn{
		top: 10px;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
		color: firebrick;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close{
		color: #fff;
	}
	/deep/ .el-icon-arrow-left:before {
	    content: "\e67d";
	    font-size: 18px;
	}
	/deep/ .el-icon-arrow-down:before {
	    content: "\e659";
	    font-size: 12px;
	}
	/deep/ .el-dropdown-menu__item{
		font-size: 12px;
	}
	/deep/ .el-dialog__body{
		padding: 10px;
	}
	/deep/ .el-descriptions{
		font-size: 12px !important;
	}
	/deep/ .el-descriptions-item__container{
		display: flex !important;
		// align-items: center !important;
		padding-top: 12px !important;
	}
	/deep/ .el-descriptions-item__label:not(.is-bordered-label){
		padding-left: 0;
		width: 66px;
		display: flex;
		justify-content: left;
	}
	/deep/ .el-color-picker__icon, .el-input, .el-textarea{
		width: 100%;
	}
	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #007bb0;
		padding: 4px;
	}
	.main{
		
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.add{
			width: 100%;
		.formTypeHeader{
			/deep/ .el-form{
				padding: 12px;
				display: flex;
				align-items: center;
				border: 1px solid #DCDFE6;
			}
			/deep/ .el-input{
				width: 168px;
			}
			/deep/ .el-form-item{
				margin-bottom: 14px;
			}
			/deep/ .el-tabs--border-card{
				width: 100%;
			}
			/deep/ .el-form-item__content{
				display: flex;
				font-size: 12px;
			}
			/deep/ .el-form-item__label{
				font-size: 12px;
				// width: 120px;
			}
		}
		.formTypeMain{
			margin-top: 12px;
			.table{
				/deep/ .el-table{
					font-size: 12px;
					width: 100%;
				}
				/deep/ .el-table tr{
					font-size: 12px;
				}
			}
			.addFormA{
				/deep/ .el-form{
					padding: 12px;
					display: flex;
					align-items: center;
					border: 1px solid #DCDFE6;
				}
				/deep/ .el-tabs--border-card{
					width: 100%;
				}
				/deep/ .el-form-item__content{
					display: flex;
					font-size: 12px;
				}
				/deep/ .el-form-item{
					margin-bottom: 14px;
					display: flex;
				}
				/deep/ .el-form-item__label{
					font-size: 12px;
					text-align: left;
					width: 140px;
				}
			}
			.addFormB{
				/* 自定义高亮颜色 */
				::v-deep .el-table__body tr.current-row > td {
				  background-color: #00557f !important;
				  color: #f9f9f9; /* 可选：修改文字颜色 */
				}
				/deep/ .el-form{
					padding: 8px 0;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				/deep/ .el-form-item{
					display: flex;
					flex-direction: column;
					text-align: center;
					width: 100%;
				}
				/deep/ .el-form-item__content{
					display: flex;
					flex-direction: column;
				}
				/deep/ .el-form-item__label{
					font-size: 12px;
					width: 100px;
					text-align: left;
				}
			}
			.addFormC{
				/deep/ .el-form{
					padding: 12px;
					display: flex;
					align-items: center;
					border: 1px solid #DCDFE6;
				}
				/deep/ .el-tabs--border-card{
					width: 100%;
				}
				/deep/ .el-form-item__content{
					display: flex;
					font-size: 12px;
					width: 100%;
				}
				/deep/ .el-form-item{
					margin-bottom: 14px;
					display: flex;
				}
				/deep/ .el-form-item__label{
					font-size: 12px;
					width: 158px;
					text-align: left;
				}
			}
		}	
	
		}
		.dialog-footer{
			margin-top: 12px;
			display: flex;
			justify-content: right;
		}
	}
	.feet{
		.GetManuFact{
			// 穿透
			/deep/ .el-dialog__header{
				padding: 4px;
				background-color: #007bb0;
			}
			/deep/ .el-dialog__title{
				font-size: 12px;
				color: #fff;
			}
			/deep/ .el-dialog__headerbtn{
				top: 10px;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
				color: firebrick;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close{
				color: #fff;
			}
			/deep/ .el-icon-arrow-left:before {
			    content: "\e67d";
			    font-size: 18px;
			}
			/deep/ .el-icon-arrow-down:before {
			    content: "\e659";
			    font-size: 12px;
			}
			/deep/ .el-dropdown-menu__item{
				font-size: 12px;
			}
			/deep/ .el-dropdown-menu__item{
				font-size: 12px;
			}
			/deep/ .el-dialog__body{
				padding: 15px 20px;
			}
			
			// form
			.form{
				/deep/ .el-select-dropdown__item{
					border: 1px solid #eeeeee;
					padding: 0;
					height: 28px;
					width: 100%;
					#optionItem {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						text-align: center;
						justify-content: center;
						span{
							display: inline-block;
							font-size: 12px;
							width: 128px;
							height: 30px;
							line-height: 30px;
							white-space: nowrap;      /* 禁止换行 */
							overflow: hidden;         /* 隐藏溢出内容 */
							text-overflow: ellipsis;  /* 溢出显示省略号 */
						}
					}
				}
				/deep/ .el-select-dropdown__wrap{
					max-height: 168px;
				}
				/deep/ .el-form{
					padding: 12px;
					display: flex;
					align-items: center;
					border: 1px solid #DCDFE6;
				}
				/deep/ .el-input{
					width: 168px;
				}
				/deep/ .el-form-item{
					margin-bottom: 8px;
					display: flex;
				}
				/deep/ .el-form-item__content{
					display: flex;
					font-size: 12px;
					width: 100%;
					/deep/ .el-table{
						width: 100%;
					}
				}
				/deep/ .el-form-item__label{
					font-size: 12px;
					width: 88px;
					text-align: left;
				}
			}
		}
	}
}
</style>